<template>
  <div :id="id" class="scroll_wrapper">
    <slot name="content"></slot>
    <slot name="loading" v-if="!bottomOrRight && showLoading">
      <div>努力加载中......</div>
    </slot>
    <slot name="bottom_info" v-if="!bottomOrRight && !showLoading">
      <div class="no_more">到底了......</div>
    </slot>
  </div>
</template>

<script setup lang="ts">
import { useScroll } from './hooks'
import { ScrollTypes } from './types'

const props = withDefaults(
  defineProps<{
    currentNum: number // 当前已加载的数据量
    total: number // 数据总数
    id?: string // 如果同个页面使用多次，请传入不同的id
    direction?: ScrollTypes.ScrollDirection // 滚动方向
  }>(),
  {
    id: 'b_scroll_box',
    direction: 'y'
  }
)
const emit = defineEmits<ScrollTypes.EmitSign>()

const { scrollBox, bottomOrRight } = useScroll(props.id, emit, props.direction)
const showLoading = computed(() => {
  return props.currentNum < props.total
})

defineExpose({
  scrollBox
})
</script>

<style lang="less" scoped>
.scroll_wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;

  .no_more {
    width: 100%;
    text-align: center;
  }
}
</style>
